<template>
	<div class="scaleBox p-6 h-full grid grid-cols-4 divide-x-4 divide-slate-400/25">
		<div class="my-card-container-grid">
			<div class="col-span-2 leading-none border-b-2 border-b-violet-700 text-3xl flex flex-row items-center font-black text-blue-500">
				<el-icon class="mr-2">
					<platform />
				</el-icon>
				{{ $t('fg.FGWarehouseLocation') }}
				<div class="box">
					<span>{{ $t('fg.inStorage') }}：{{ data.instockQty }}</span>
					<span style="font-size: 14px">/{{ $t('fg.ark') }}</span>
				</div>
			</div>
			<template v-for="(item, index) of getList1" :key="index">
				<location-card :data="getList1[index]"></location-card>
				<location-card :data="getList5[index]"></location-card>
			</template>
		</div>
		<div class="my-card-container-grid my-card-container-bg">
			<template v-for="(item, index) of getList2" :key="index">
				<location-card :data="getList2[index]"></location-card>
				<location-card :data="getList6[index]"></location-card>
			</template>
		</div>
		<div class="my-card-container-grid">
			<template v-for="(item, index) of getList3" :key="index">
				<location-card :data="getList3[index]"></location-card>
				<location-card :data="getList7[index]"></location-card>
			</template>
		</div>
		<div class="my-card-container-grid my-card-container-bg">
			<template v-for="(item, index) of getList4" :key="index">
        <location-card :data="getList4[index]"></location-card>
				<location-card :data="getList8[index]"></location-card>
			</template>
		</div>
	</div>
</template>
<script setup>
import { onMounted, reactive } from 'vue';
import { getList1, getList2, getList3, getList4, getList5, getList6, getList7, getList8, loadData } from './data';
import LocationCard from './locationCard.vue';
import { getInstockQty } from '/@/api/platform/report/FGLocation';
// import ScaleBox from 'vue3-scale-box'

const data = reactive({
	instockQty: 0,
});
// 默认有90个格子
onMounted(() => {
	loadData();
	setInterval(loadData, 1000 * 5)
	instockQty();
});

// 查询总柜数
const instockQty = () => {
	getInstockQty().then((res) => {
		data.instockQty = res.data.toFixed(2);
	});
};
</script>
<style scoped lang="scss">
.my-card-container-grid {
	@apply grid grid-cols-2 h-full gap-3 p-2.5 rounded-lg;
}

.my-card-container-bg {
	@apply bg-gradient-to-b from-gray-50 to-sky-50;
}

@import './index.scss';
</style>
